<template>
<div>
	<Card  dis-hover>
		<p slot="title">管理商品</p>
		<div pd2>
			<Button v-if="operateable" size="small" @click="handleShowCreateCommodityClassModal(null)">新增类别</Button>
			<treeview
				:ref="treeviewRef" 
				:defaultSelectedValues="value" 
				:data="treeData" 
				:selectable="selectable"
				:maxLevel="10"
				:operateable="operateable"
				:justShowSelectedNode="!selectable && !operateable"
				@on-add-click="handleShowCreateCommodityClassModal"
				@on-edit-click="handleShowUpdateCommodityClassModal"
				@on-delete-click="handleDelete"
				@on-select="handleOnSelect"
				@on-up-click="handleUp"
				@on-down-click="handleDown"
				@on-right-click="handleRight"
				@on-left-click="handleLeft"
				style="max-width:800px;" mgt2></treeview>
		</div>
	</Card>
	
	<Modal v-model="showCreateCommodityClassModal" :title="model.id?'修改类别':'添加类别'" :mask-closable="false">
		<Form :ref="formRef" :model="model" :label-width="100">
			<!-- <FormItem label="唯一名称" prop="name" required>
				<Input v-model="model.name" :disabled="!!model.id" />
			</FormItem> -->
			<FormItem label="名称" prop="displayName" required>
				<Input v-model="model.displayName" />
			</FormItem>
		</Form>
        <div slot="footer">
            <Button type="primary" @click="handleCreateCommodityClass">{{model.id?'保存':'添加'}}</Button>
            <Button @click="showCreateCommodityClassModal=false">取消</Button>
        </div>
	</Modal>
</div>
</template>

<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../../lib/abpbase'
import Treeview from '../../../components/common/treeview.vue'

@Component({
	components: {
		Treeview
	}
})
export default class CommodityClassManager extends AbpBase{
	@Prop({type:Boolean,default:false}) selectable:Boolean;
	@Prop({type:Boolean,default:true}) operateable:Boolean;
	@Prop({type:Array,default:()=>[]}) value:Array;
	showCreateCommodityClassModal:Boolean = false;
	treeviewRef:string = this.getRandomRef('treeview');
	formRef:string = this.getRandomRef('CommodityClass-form');
	model:any = this.getDefaultModel(null);
	currentTempData:any = {};
	treeData:Array<any> = [];
	getDefaultModel(parentId) {
		return{
			name: "",
			displayName: "",
			enabled: true,
			parentId: parentId
		}
	}
	formatData(data) {
		var result = [];
		data.forEach(elem => {
			var temp:any = {
				id: elem.value.id,
				value: elem.value.name,
				title: elem.value.displayName,
				isStatic: elem.value.isStatic
			};
			if(elem.children) {
				temp.children = this.formatData(elem.children);
			}
			result.push(temp);
		});
		return result;
	}
	handleShowCreateCommodityClassModal(item, parent, index, callback) {
		this.currentTempData = {
			item: item,
			parent: parent,
			index: index,
			callback: callback
		};
		this.model = this.getDefaultModel(item.id);
		this.showCreateCommodityClassModal = true;
	}
	handleShowUpdateCommodityClassModal(item, parent, index, callback) {
		this.currentTempData = {
			item: item,
			parent: parent,
			index: index,
			callback: callback
		};
		this.model = {
			id: item.id,
			name: item.value,
			displayName: item.title
		};
		this.showCreateCommodityClassModal = true;
	}
	async handleCreateCommodityClass() {
		this.model.name = this.model.displayName;
		this.validate(this.formRef, async () => {
			if(this.model.id) {
				var response = await this.put('CommodityClass/Update', this.model);
				if(response.success) {
					this.currentTempData.callback({
						title: this.model.displayName
					});
					this.showCreateCommodityClassModal = false;
				}
			}else {
				var response = await this.post('CommodityClass/Create', this.model);
				if(response.success) {
					this.currentTempData.callback({
						id: response.result.id,
						value: response.result.name,
						title: response.result.displayName
					});
					this.showCreateCommodityClassModal = false;
				}
			}
		});
	}
	handleDelete(data, parent, index, callback) {
		this.confirm('确认删除该类别吗？', async () => {
			var response = await this.post('CommodityClass/Delete', { id: data.id });
			if(response.success) {
				callback();
			}
		});
	}
	handleOnSelect(values) {
		this.$emit('on-select', values);
	}
	async handleUp(data, parent, index, callback) {
		if(index > 0) {
			var response = await this.post('CommodityClass/SortUp', { id: data.id });
			if(response.success) {
				callback();
			}
		}
	}
	async handleDown(data, parent, index, callback) {
		if(index < parent.children.length - 1) {
			var response = await this.post('CommodityClass/SortDown', { id: data.id });
			if(response.success) {
				callback();
			}
		}
	}
	async handleRight(data, parent, index, callback) {
		if(index > 0) {
			var response = await this.post('CommodityClass/MoveDown', { id: data.id });
			if(response.success) {
				callback();
			}
		}
	}
	async handleLeft(data, parent, index, callback) {
		if(data.level > 1) {
			var response = await this.post('CommodityClass/MoveUp', { id: data.id });
			if(response.success) {
				callback();
			}
		}
	}
	clearSelect() {
		(this.$refs[this.treeviewRef] as any).clearSelect();
	}
	async handleGetTree() {
		var response = await this.get('CommodityClass/GetTree');
		if(response.success) {
			this.treeData = this.formatData(response.result);
		}
	}
	async created() {
		await this.handleGetTree();
	}
}
</script>